<template>
  <div class="popular-recommendation">
    <div class="container pad-30">
      <!-- 上面的头 -->
      <FloorHeader
        :title="$t('popularRecommendation')"
        :tabs="tabs"
        @tab-change="tabChangeHandler"
        :link="$t('moreRecommendation')"/>
        <!-- 主要的商品信息 -->
      <div class="main-product">
        <!-- 商品列表 -->
        <div class="product-item" v-for="(goods) in goodsList" :key="goods.id">
          <img :src="goods.listPicUrl" alt="">
          <div class="tag-list">
            <span class="tag" v-for="tag in goods.itemTagList" :key="tag.tagId">{{ tag.name }}</span>
          </div>
          <div class="goods-name">{{ goods.name }}</div>
          <div class="price">
            <div class="current">{{ $t('priceSymbol') }}{{ goods.retailPrice }}</div>
            <div class="old" v-if="goods.counterPrice && goods.counterPrice > 0">{{ $t('priceSymbol') }}{{ goods.counterPrice }}</div>
          </div>
          <!-- 产地 -->
          <div class="product-place" v-if="goods.productPlace">{{ goods.productPlace }}</div>
          <!-- N色可选 -->
          <span class="product-place" v-if="!goods.productPlace && goods.colorNum > 0">{{ goods.colorNum }}色可选</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloorHeader from './FloorHeader'

export default {
  components: {
    FloorHeader
  },

  props: {
    products: {
      type: Object,
      default: () => {}
    }
  },

  data () {
    return {
      goodsList: [],
      tabs: ['编辑推荐', '热销总榜'],
      classify: ['床品件套', '被枕', '家具', '灯具', '收纳', '布艺软装', '家饰']
    }
  },

  created () {
    this.goodsList = this.products.popularItemList
  },

  methods: {
    /**
     * tab点击切换了
     * @param { Number } index 当前展示的是第几个
     */
    tabChangeHandler (index) {
      // 如果当前点击了第一个tab页签，展示编辑推荐
      if (index === 0) {
        this.goodsList = this.products.popularItemList
        return
      }
      // 设置当前列表展示数据是热销总榜
      this.goodsList = this.products.popularTotalList
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/variable";
@import "./../../styles/common";

.popular-recommendation {
  background: @bg-lightgrey;
  padding: 30px 0;
  .main-product {
    overflow: hidden;
    .product-item {
      background: @write;
      cursor: pointer;
      float: left;
      width: 210px;
      margin-left: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      position: relative;
      img {
        .transition-fast;
        width: 100%;
        height: 210px;
      }
      .tag-list {
        margin: 8px 0px 4px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        .tag {
          color: @write;
          display: inline-block;
          padding: 0px 6px;
          margin-left: 6px;
          &:nth-child(1) {
            background: @font-color-tag-warning;
          }
          &:nth-child(2) {
            background: @font-color-tag-danger;
          }
        }
      }
      .goods-name {
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        margin: 10px 0px 10px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0px 10px;
        &:hover {
          color: @font-color-golden;
        }
      }
      .price {
        text-align: center;
        padding-bottom: 16px;
        .current {
          color: @color-warning;
          display: inline-block;
          font-size: 13px;
        }
        .old {
          color: @font-color-grey;
          display: inline-block;
          font-size: 12px;
          text-decoration: line-through;
        }
      }
      .product-place {
        background: @bg-lightgrey;
        border: 1px solid @font-color-golden;
        border-radius: 6px;
        color: @font-color-golden;
        position: absolute;
        line-height: 18px;
        padding: 0px 4px;
        top: 10px;
        left: 10px;
      }
      &:first-child {
        width: 360px;
        margin: 0px 0px 18px;
        img {
          height: 360px;
          margin: 74px 0px;
        }
        .goods-name {
          cursor: pointer;
          font-size: 18px;
          line-height: 18px;
          margin: 10px 0px 18px;
        }
        .price {
          .current {
            font-size: 18px;
          }
          .old {
            font-size: 14px;
          }
        }
      }
      &:hover {
        img {
          transform: scale(1.08, 1.08);
        }
      }
    }
  }
}
</style>
